	<template>
  <view class="content">
    <view class="data">
      <text>{{ val }}</text>
    </view>
    <button type="primary" @click="comunicationOff">结束监听</button>
  </view>
</template>

	<script>
export default {
  // 
  data() {
    return {
      val: 0
    }
  },
  onLoad() {
    // 2、每隔1s，触发一次 add 事件，传参；（结果就是 val 会递增2；）
    setInterval(() => {
      uni.$emit('add', {
        data: 2
      })
    }, 1000)
    // 1、监听全局的自定义事件
    uni.$on('add', this.add)
  },
  methods: {
    comunicationOff() {
      // 3、点击按钮后，结束事件的监听；
      uni.$off('add', this.add)
    },
    add(e) {
      this.val += e.data
    }
  }
}
	</script>

	<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .data {
    text-align: center;
    line-height: 40px;
    margin-top: 40px;
  }

  button {
    width: 200px;
    margin: 20px 0;
  }
</style>

